<script setup>
import {onMounted, ref} from 'vue';
import luckysheet from "luckysheet";

const sheetData = ref('')
const waterForm = ref({})
// 初始化表格
let options = {
  container: "luckysheet", //luckysheet为容器id
  lang: 'zh',
  autoCalculate: true,
  data: [
    {
      "name": "", // 工作表名称
      "color": "", // 工作表颜色
      "index": 0, // 工作表索引
      "status": 1, // 激活状态
      "order": 0, // 工作表的下标
      "column": 6, // 列数
      "defaultRowHeight": 30, // 自定义行高
      "defaultColWidth": 100, // 自定义列宽
      "celldata": [
        // 初始化表格数据，第一行包含表头
        {"r": 0, "c": 0, "v": "样品编号", "style": {"ht": 0, "vt": 0}}, // A1
        {"r": 0, "c": 1, "v": "类型", "style": {"ht": 0, "vt": 0}}, // B1
        {"r": 0, "c": 2, "v": "温度(℃)", "style": {"ht": 0, "vt": 0}}, // C1
        {"r": 0, "c": 3, "v": "PH值", "style": {"ht": 0, "vt": 0}}, // D1
        {"r": 0, "c": 4, "v": "最终结果", "style": {"ht": 0, "vt": 0}}, // E1
        {"r": 0, "c": 5, "v": "备注", "style": {"ht": 0, "vt": 0}}, // E1
      ], // 初始化数据
      "config": {
        "merge": {}, // 合并单元格
        "rowlen": {}, // 表格行高
        "columnlen": { // 设置列宽
          "0": 200, // 第一列宽度 150px
          "1": 150, // 第二列宽度 120px
          "2": 200, // 第三列宽度 180px
          "3": 200, // 第四列宽度 100px
          "4": 200, // 第五列宽度 200px
          "5": 180  // 第六列宽度 150px
        }, // 表格列宽
        "rowhidden": {}, // 隐藏行
        "colhidden": {}, // 隐藏列
        "borderInfo": {}, // 边框
        "authority": {}, // 工作表保护
      },
      "scrollLeft": 0, // 左右滚动条位置
      "scrollTop": 0, // 上下滚动条位置
      "luckysheet_select_save": [], // 选中的区域
      "calcChain": [
        {
          "r": 0, // 行号
          "c": 2, // 列号 (C1)
          "t": "f",
          "index": 0, // 工作表ID
          "func": [true, null, "=A1+B1"], // 公式和计算结果
          "color": "w",
          "parent": null,
          "children": {},
          "times": 0
        }
      ], // 公式链
      "isPivotTable": false, // 是否数据透视表
      "pivotTable": {}, // 数据透视表设置
      "filter_select": {}, // 筛选范围
      "filter": null, // 筛选配置
      "luckysheet_alternateformat_save": [], // 交替颜色
      "luckysheet_alternateformat_save_modelCustom": [], // 自定义交替颜色
      "luckysheet_conditionformat_save": {}, // 条件格式
      "frozen": {}, // 冻结行列配置
      "chart": [], // 图表配置
      "zoomRatio": 1, // 缩放比例
      "showGridLines": 1, // 是否显示网格线
      "dataVerification": {} // 数据验证配置
    }
  ],
  showinfobar: false, // 隐藏信息栏
  showtoolbar: false, // 隐藏工具栏
};
// 在组件挂载后初始化 Luckysheet
onMounted(() => {
  luckysheet.create(options);
  // 获取初始数据并保存在响应式变量中
  sheetData.value = options.data
});
// 用于获取最新的表格数据
const getUpdatedData = () => {
  console.log(sheetData.value); // 打印当前表格的数据
};
</script>

<template>
  <div class="card">
    <el-card class="box-card">
      <h1 style="text-align: center">水质 浊度分光光度法分析原始记录</h1>
      <table class="table">
        <tr style="background-color: #f2f2f2">
          <td>任务编号</td>
          <td>

          </td>
          <td>采样日期</td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.task_name"/>
          </td>
          <td>分析日期</td>
          <td></td>
        </tr>
        <tr>
          <td>分析方法</td>
          <td colspan="3"></td>
          <td>检出限</td>
          <td></td>
        </tr>
        <tr style="background-color: #f2f2f2">
          <td>分析仪器</td>
          <td></td>
          <td>仪器型号</td>
          <td></td>
          <td>仪器编号</td>
          <td></td>
        </tr>
        <tr>
          <td>计算公式</td>
          <td></td>
          <td>环境条件</td>
          <td></td>
          <td>样品类别</td>
          <td></td>
        </tr>
        <tr>
          <td colspan="6">
            <div class="table-td">
              标准曲线绘制
            </div>
          </td>
        </tr>
        <tr>
          <td>标准贮备液批号</td>
          <td></td>
          <td>贮备液浓度(度)</td>
          <td></td>
          <td>贮备液有效日期</td>
          <td></td>
        </tr>
        <tr>
          <td colspan="3">测定值</td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </table>
      <table class="table">
        <tr>
          <td>编号</td>
          <td>01</td>
          <td>02</td>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
          <td>6</td>
        </tr>
        <tr>
          <td>标准储备液体积(mL)</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>定容体积(ml)</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>标准曲线</td>
          <td colspan="8">
            <div>
              y=
            </div>
            <div>
              x=
            </div>

          </td>
        </tr>
      </table>
      <div id="luckysheet" style="width:100%;height:500px;"></div>
    </el-card>
    <el-card class="box-card" style="margin-top: 30px">
      <div style="display: flex;justify-content: space-between;">
        <!--        占位盒子-->
        <div></div>
        <div>
          <el-button>取消</el-button>
          <!--          <el-button>新增</el-button>-->
          <!--          <el-button>复制并新增</el-button>-->
          <el-button>保存</el-button>
          <el-button type="primary" @click="getUpdatedData">提交</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.card {
  padding: 20px 25px;
}

.table {
  width: 100%;
  border-collapse: collapse; /* 表格边框合并 */
  text-align: left; /* 默认左对齐 */
  font-size: 14px; /* 字体大小 */
  color: #606266; /* 默认字体颜色 */
}

.table th,
.table td {
  border: 1px solid #c2bfbf; /* 表格单元格边框颜色 */
  padding: 12px; /* 单元格内边距 */
}

.table th {
  background: #f5f7fa; /* 表头背景色 */
  font-weight: 600; /* 表头字体加粗 */
  color: #303133; /* 表头字体颜色 */
  text-align: center; /* 表头居中 */
}

.table td {
  width: 10%;
}

.table-td {
  display: flex;
  justify-content: center;
}
</style>
